<template>
    <section>
        <div class="screen">
            <XcScreenType screen-type="inner" :top="screenModel.top" :bottom="screenModel.bottom" />
            <el-button type="text" class="change-demo" @click="changeSrc">帧图</el-button>
        </div>
        <section class="btnHandel">
            <div>
                <el-button @click="router.back()">返回列表</el-button>
                <el-button type="primary" @click="nextStep">下一步</el-button>
            </div>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import XcScreenType from '@x-tech/fe-pc-components/src/components/XcScreenType/index.vue';
import { useRouter, useRoute } from 'vue-router';
import { Upload } from '@x-tech/fe-puma-lib-upload';

import { screenshot, addReport } from '@/api/carryBroadcast';

const upl = new Upload(import.meta.env.VITE_ENV);
const router = useRouter();
const route = useRoute();
const screenModel = reactive({
    top: {
        resourcesType: 1,
        src: '',
    },
    bottom: {
        leftSrc: '',
        rightSrc: '',
        src: '',
    },
});
const upList = ref([]);
const num = ref(0);
const getScreenshot = async () => {
    let param = { planId: route.query.planId, mediaType: 1 };
    let data = await screenshot(param);
    upList.value = data.upList;
    screenModel.bottom.leftSrc = data.down01;
    screenModel.bottom.rightSrc = data.down02;
    screenModel.bottom.src = data.down01;
    screenModel.top.src = data.upList[num.value];
};
onMounted(() => {
    getScreenshot();
});

const changeSrc = () => {
    if (num.value < 2) {
        num.value++;
    } else {
        num.value = 0;
    }
    screenModel.top.src = upList.value[num.value];
};
const nextStep = () => {
    router.push({
        path: '/delivery/makeCarryBroadcast',
        query: { planId: route.query.planId, url: screenModel.top.src, imgType: route.query.imgType },
    });
};
</script>

<style lang="scss" scoped>
.screen {
    .change-demo {
        margin: 20px 90px;
    }
}
.btnHandel {
    height: 56px;
    background: #fff;
    padding-right: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 22px;
    left: 22px;
    bottom: 0;
    z-index: 9;
}
</style>
